<%= render "navbar"%>

<div id="index_banner_slide" class="carousel slide index_slide vip_banner" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#index_banner_slide" data-slide-to="0" class="active"></li>
    <li data-target="#index_banner_slide" data-slide-to="1"></li>
    <li data-target="#index_banner_slide" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/c077c43b9453c54206f52291141ec0b6e967e295-a2ac05db1dd05c2e7f5afea0425a5d7d8a634146.jpg" alt="vip_banner_img" class="vip_banner_img">
    </div>
    <div class="item">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/c077c43b9453c54206f52291141ec0b6e967e295-a2ac05db1dd05c2e7f5afea0425a5d7d8a634146.jpg" alt="vip_banner_img" class="vip_banner_img">
    </div>
    <div class="item">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/c077c43b9453c54206f52291141ec0b6e967e295-a2ac05db1dd05c2e7f5afea0425a5d7d8a634146.jpg" alt="vip_banner_img" class="vip_banner_img">
    </div>
  </div>

  <!-- Controls -->
  <a class="left arrow fa fa-angle-left" href="#index_banner_slide" role="button" data-slide="prev"></a>
  <a class="right arrow fa fa-angle-right" href="#index_banner_slide" role="button" data-slide="next"></a>
</div>

<div class="vip_class_classify container">
  <h2>课程分类</h2>
  <div class="classify_item">
    <span class="item item_title" style="font-weight:bold;">培训课程：</span>
    <span class="item active">摄影</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
  </div>
  <!-- <div class="class_sort">
    <span class="item active">最新</span>
    <span class="item">最热</span>
  </div> -->
</div>

<div class="vip_class_container container">
  <div class="row">
  <% 4.times.each do |i| %>
    <div class="col-md-4 col-xs-12 class_item">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/692aba4e48763b27cfa71a579a86a31d20a9b0cf-cdea879f38477d779e1f5cce0535d8b144241804.png" alt="">
      <h3 class="class_title">著名的钢琴大师教你如何21天从零到十级成为高手</h3>
      <p class="class_addr">地址：宁波市海宁波市海曙曙人民广场五号楼a座9区808房间</p>
      <div class="row">
        <div class="col-xs-7">
          <span class="see_desc"><i class="fa fa-user"></i>&nbsp;<span class="num">100</span>人已浏览</span>
        </div>
        <div class="col-xs-5">
          <span class="delete">原价180</span><span class="price"><sup>￥</sup>100</span>
        </div>
      </div>
    </div>
  <% end %>
  <% 3.times.each do |i| %>
    <div class="col-md-4 col-xs-12 class_item">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/692aba4e48763b27cfa71a579a86a31d20a9b0cf-cdea879f38477d779e1f5cce0535d8b144241804.png" alt="">
      <h3 class="class_title">钢琴</h3>
      <p class="class_addr">地址：宁波市海宁波市海曙房间</p>
      <div class="row">
        <div class="col-xs-7">
          <span class="see_desc"><i class="fa fa-user"></i>&nbsp;<span class="num">100</span>人已浏览</span>
        </div>
        <div class="col-xs-5">
          <span class="delete">原价180</span><span class="price"><sup>￥</sup>100</span>
        </div>
      </div>
    </div>
  <% end %>
  </div>
  <div class="vip_pagination">
    <a href="#" class="item">首页</a>
    <a href="#" class="item">上一页</a>
    <a href="#" class="item active">1</a>
    <a href="#" class="item">2</a>
    <a href="#" class="item">下一页</a>
    <a href="#" class="item">尾页</a>
  </div>
</div>
